<template>
  <div>
    <button @click="isShow = true">弹框</button>

    <!-- 让弹窗定位在body上,  to=父组件的标签名  -->
    <teleport to="body">
      <!-- 弹框组件 -->
      <div class="dialog" v-if="isShow">
        <div class="con">
          <button @click="isShow = false">取消</button>
        </div>
      </div>
    </teleport>
  </div>
</template>

<script setup>
import { ref } from "vue";
let isShow = ref(false);
</script>

<style scoped>
.dialog {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0px;
  left: 0px;
}
.con {
  width: 300px;
  height: 300px;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>